<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>纯js实现复制</title>
	<!--responsive mate -->
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta name="description" content="搜集所有应用稳定的框架，jq，ui等">
	<meta name="author" content="Dc">
	<meta name="keyword" content="Dc,bootstarp,zui,flatui,DcUi,jquery,modal,datatable">
	<link rel="shortcut icon" href="favicon.ico">
	<!-- Bootstrap core CSS -->
	<!--flat-->
	<!--flat media-->
	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

	<link rel="stylesheet" href="../zui/css/zui.css" />
</head>

<body>
	<section class="panel panel-body">
		<div class="panel-heading">
			<h1>无依赖纯js实现复制文本</h1>
		</div>

		<p>
			from:
			<a href="https://github.com/zenorocha/clipboard.js">github</a>
		</p>
		<p>兼容：ie9+，edge12+..</p>
		<section>
			<h2>复制文本的框内容</h2>
			<!-- Target -->
			<input class="foo" id="foo" value="按键将获得这里的内容" />
			<!-- Trigger -->
			<button type="button" class="btn" data-clipboard-action="cut" data-clipboard-target="#foo">复制</button>
		</section>
		<p>初始化：<strong>new Clipboard('.btn');</strong></p>
		<p><strong>data-clipboard-target</strong>设置选择的对象</p>
		<fieldset>
			<legend>data-clipboard-action options</legend>
			<ul>
				<li>copy:复制</li>
				<li>cut:剪切</li>

			</ul>
		</fieldset>
		<fieldset>
			<legend>Api</legend>
			<ol>
				<h3>参数</h3>
				<li><strong>target</strong>(function) 回调触发对象 返回一个 value</li>
				<h3>方法</h3>
				<li><strong>clipboard.on('success',function)成功时触发</strong>
					<pre>
							<code>
	clipboard.on('success', function(e) {
		console.info('Action:', e.action); //执行的操作
		console.info('Text:', e.text); //text内容
		console.info('Trigger:', e.trigger);//触发对象
		 e.clearSelection();
				
	});</code>
						</pre>
				</li>
				<li><strong>clipboard.on('error',function);发生错误时触发</strong>
					<pre>
							<code>
	clipboard.on('error', function(e) { 					console.error('Action:', e.action); 
		console.error('Trigger:', e.trigger); 
	});
							</code>
						</pre>
				</li>
				<li><strong>clipboard.destroy()删除复制器</strong></li>
			</ol>
		</fieldset>
	</section>
	<script src="js/clipboard.js"></script>
	<script>
		//处事化一个复制按钮
		var clipboard = new Clipboard('.btn');
		//sccess
		clipboard.on('success', function (e) {
			console.info('Action:', e.action);
			console.info('Text:', e.text);
			console.info('Trigger:', e.trigger);
			e.clearSelection();
		});
		//error
		clipboard.on('error', function (e) {
			console.info('Action:', e.action);
			console.info('Trigger:', e.trigger);
			e.clearSelection();
		});
	</script>
</body>

</html>